<!--
formTitle模板:
    {cn: '显示字段',
        en: '匹配数据字段',
        disabled: 布尔值, 是否能编辑
        type:'类型',  select/multi-select(可多选的选择框)/img(图片)/time(时间选择)/checkbox/uploadImg/upload1`4/password/textarea/phone(显示多个电话)/birth(显示公历农历选择框,和输入框)
        list:[{      checkbox/select/multi-select 时显示多个选项
                label:'超级管理员',
                value:'admin'
            },]
            },

-->

<template>
  <el-form ref="form" :model="formData" :rules="rules" :label-width="labelWidth" status-icon style="width:100%;">
    <template v-for="(col,index) in formTitle">
      <el-form-item
        v-if="col.type==='textarea'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">
        <el-input
          :rows="3"
          :disabled="col.disabled"
          v-model="formData[col.en]"
          type="textarea"
          placeholder="请输入内容"/>
      </el-form-item>

      <el-form-item
        v-if="col.type==='phone'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">
        <el-input
          v-for="(item,index) in formData[col.en]"
          :key="index"
          :disabled="col.disabled"
          v-model="formData[col.en][index].telNum"
          placeholder="请输入内容"/>
      </el-form-item>

      <el-form-item
        v-if="col.type==='money'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">
        <el-input
          :disabled="col.disabled"
          v-model="formData[col.en]"
          placeholder="请输入内容"
          type="number">
          <template slot="prepend">¥</template>
        </el-input>
      </el-form-item>

      <el-form-item
        v-if="col.type==='time'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">
        <el-date-picker
          v-model="formData[col.en]"
          :disabled="col.disabled"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"/>
      </el-form-item>

      <el-form-item v-if="col.type==='img'" :label="col.cn" :size="size" :key="col.en" class="wid100">
        <div
          :style="'background:url('+formData[col.en]+') center/cover no-repeat; width:60px;height:60px;margin-left:15px'"/>
        <span v-if="col.tips" style="color:#999;font-size: 12px;">{{ col.tips }}</span>
      </el-form-item>

      <el-form-item
        v-if="col.type==='password'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">
        <el-input
          v-model="formData[col.en]"
          :key="index"
          :disabled="col.disabled"
          :placeholder="col.placeholder"
          :type="col.type"
          class="wid100"/>
      </el-form-item>

      <el-form-item
        v-if="col.type==='birth'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">
        <el-select
          v-model="formData[col.en].calendar"
          :disabled="col.disabled"
          :placeholder="col.placeholder||('选择'+col.cn)"
          filterable
        >
          <el-option
            v-for="item in col.list"
            :key="item.value"
            :label="item.label"
            :disabled="col.disabled"
            :value="item.value"/>
        </el-select>
        <el-input
          v-model="formData[col.en].date"
          :key="index"
          :disabled="col.disabled"
          :placeholder="col.placeholder"
          :type="col.type"
        />
      </el-form-item>

      <!--没啥用-->
      <el-form-item
        v-if="col.type==='tag'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en"
        class="wid100">

        <el-button
          v-for="tag in col.list"
          :key="tag.value"
          @click="tagClicked(tag)"

        >
          {{ tag.label }}
        </el-button>
      </el-form-item>

      <el-form-item
        v-else-if="col.type==='select'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en">
        <el-select
          v-model="formData[col.en]"
          :prop="col.en"
          :disabled="col.disabled"
          :placeholder="col.placeholder||('选择'+col.cn)"
          filterable
          class="wid100"
          @change="change">
          <el-option
            v-for="item in col.list"
            :key="item.value"
            :label="item.label"
            :disabled="col.disabled"
            :value="item.value"/>
        </el-select>
        <div v-if="col.tips" style="color: red;">{{ col.tips }}</div>
      </el-form-item>

      <el-form-item
        v-else-if="col.type==='checkbox'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en">
        <el-checkbox-group
          v-model="formData[col.en]"
          :disabled="col.disabled"
          @change="checkboxChange"
        >
          <template v-for="item in col.list">
            <el-checkbox :label="item.value" name="type">{{ item.label }}
            </el-checkbox>
          </template>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item
        v-else-if="col.type==='switch'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en">
        <el-switch
          v-model="formData[col.en]"/>
      </el-form-item>

      <el-form-item
        v-else-if="col.type==='multi-select'"
        :label="col.cn"
        :prop="col.en"
        :size="size"
        :key="col.en">
        <el-select
          v-model="formData[col.en]"
          filterable
          multiple
          placeholder="请选择"
          class="wid100"
          @change="multiChange">
          <el-option
            v-for="item in col.list"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>

      <template v-else-if="col.type==='upload1'">
        <slot :info="col" :data="formData[col.en]" name="upload1"/>
      </template>
      <template v-else-if="col.type==='upload2'">
        <slot :info="col" :data="formData[col.en]" name="upload2"/>
      </template>
      <template v-else-if="col.type==='upload3'">
        <slot :info="col" :data="formData[col.en]" name="upload3"/>
      </template>
      <template v-else-if="col.type==='upload4'">
        <slot :info="col" :data="formData[col.en]" name="upload4"/>
      </template>
      <template v-else-if="col.type==='upload5'">
        <slot :info="col" :data="formData[col.en]" name="upload5"/>
      </template>

      <template v-else-if="col.type==='uploadImg'">
        <slot :info="col" :data="formData[col.en]" name="uploadImg"/>
      </template>

      <el-form-item
        v-else-if="!col.type"
        :label="col.cn"
        :prop="col.en"
        :key="col.en"
        :size="size">
        <template v-if="formData[col.en] instanceof Array">
          <template v-for="(data,index) in formData[col.en]">
            <el-input
              v-model="data.item"
              :key="index"
              :disabled="col.disabled"
              :placeholder="col.placeholder"
              class="wid100"/>
          </template>
          <div v-if="col.editable" :class="{mt10:formData[col.en].length>0}">
            <el-button type="primary" size="mini" @click="add(formData[col.en])">添加</el-button>
            <el-button
              v-if="formData[col.en].length>0"
              type="primary"
              size="mini"
              @click="del(formData[col.en])">删除
            </el-button>
          </div>
        </template>
        <template v-else>
          <el-input
            v-model="formData[col.en]"
            :disabled="col.disabled"
            :placeholder="col.placeholder"
            class="wid100"
            @focus="focus(formData[col.en],col.en)"
            @blur="blur(formData[col.en],col.en)"
          >

            <el-button
              v-if="col.append"
              slot="append"
              type="primary"
              @click="onExpendDetail(formData[col.en])">{{ col.text }}
            </el-button>
          </el-input>
        </template>
      </el-form-item>
    </template>
  </el-form>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
      }
    },
    formTitle: {
      type: Array,
      default: () => { return [] }
    },
    labelWidth: {
      type: String,
      default: '80px'
    },
    size: {
      type: String,
      default: 'mini'
    },
    rules: {
      type: Object,
      default: () => {
      }
    },
    showReset: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    add(val) {
      val.push({ item: '' })
    },
    del(val, index) {
      val.pop()
    },
    onExpendDetail(val) {
      this.$emit('onExpendDetail', val)
    },
    tagClicked(val) {
      this.$emit('tagClicked', val)
    },
    reset() {
      this.$refs.form.resetFields()
    },
    blur(val, name) {
      this.$emit('blur', val, name)
    },
    focus(val, name) {
      this.$emit('focus', val, name)
    },
    change(val) {
      this.$emit('change', val)
    },
    multiChange(val) {
      this.$emit('multiChange', val)
    },
    checkboxChange(val) {
      console.log(val)
    }
  }
}

</script>

<style scoped>
    .wid100 {
        width: 100%;
    }

</style>
